<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 100px auto;
            width: 400px;
            height: 300px;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #000;
            overflow: auto;
        }

        .fb {
            width: 400px;
            height: 80px;
            margin: 0 auto;
            box-sizing: border-box;
            border: 1px solid #000;
            position: relative;
            top: -100px;
            border-top: none;
            text-align: center;
            padding-top: 5px;
        }

        .fb input {
            width: 80px;
            height: 40px;

            font-size: 24px
        }

        ul li {
            float: left;
            height: auto;
            padding-bottom: 5px;
            border-bottom: 1px solid #000;
        }

        ul li a {
            width: 100px;
            float: left;
        }

        ul li p {
            width: 250px;
            float: right;
        }
    </style>
    <style>
        section {
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 22;
            background-color: rgba(63, 60, 60, .5);
        }

        .tc {
            width: 250px;
            height: 300px;
            position: absolute;
            top: 50px;
            left: 300px;
            border: 1px solid #000;
            background-color: #fff;
        }

        .tc h2 {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: rgb(88, 83, 83);
        }

        .tc h2 span {
            color: rgb(20, 19, 19);
            display: inline-block;
            text-align: center;
            line-height: 30px;
            width: 30px;
            height: 30px;
            cursor: pointer;
            margin-left: 15px;
            background-color: rgb(241, 236, 236);
        }

        .tc li {
            margin: 20px auto;
        }

        .tc li div {
            width: 150px;
            height: 100px;
            display: inline-block;
            border: 1px solid #ccc;
            outline: none
        }

        .tc li input {
            width: 150px;
            display: inline-block;
            border: 1px solid #ccc;
            outline: none
        }

        .tc p {
            width: 100%;
            padding-left: 50px;
        }

        .tc p input {
            margin-right: 20px;
            background-color: #fff;
            border: 1px solid rgb(175, 172, 172);
        }
    </style>
</head>

<body>
    <ul>
        <li class="ssqq">
            <a href="#">1111</a>
            <p>后代元素选择器 #fancy pickle 复合选择器</p>
        </li>
        <li>
            <a href="#">1111</a>
            <p>plate 元素选择器 bento 元素选择器 #fancy 后代元素选择器 #fancy pickle 复合选择器</p>
        </li>
        <li>
            <a href="#">1111</a>
            <p>plate 元素选择器 bento 元素选择器 #fancy ID选择器 plate apple 后代元素选择器 #fancy pickle 复合选择器</p>
        </li>
        <li>
            <a href="#">1111</a>
            <p>plate 元素选择器 bento 元素选择器 #fancyplate apple 后代元素选择器 #fancy pickle 复合选择器</p>
        </li>
        <li>
            <a href="#">1111</a>
            <p>plate 元素选择器 bento 元素选择器 #fancyplate apple 后代元素选择器 #fancy pickle 复合选择器</p>
        </li>
    </ul>
    <div class="fb">
        <input type="submit" value="发布">
    </div>
    <section>
        <div class="tc">
            <h2 class="link">这是广告框的标题
                <span>+</span>
            </h2>
            <li>昵称：
                <input class="iup1" type="text"> </li>
            <li>内容：
                <div class="iup2" contenteditable="true"></div>
            </li>
            <p>
                <input type="submit" value="发送" class="btn1">
                <input type="submit" value="关闭" class="btn2">
            </p>
        </div>
    </section>
</body>

</html>
<script>
    var fb = document.querySelector('.fb')
    var section = document.querySelector('section')
    var sapn = document.querySelector('.tc h2 span')
    var tc = document.querySelector('.tc')
    var h2 = document.querySelector('.tc h2')
    var btn1 = document.querySelector('.btn1')
    var btn2 = document.querySelector('.btn2')
    var iup1 = document.querySelector('.iup1')
    var iup2 = document.querySelector('.iup2')
 var ss = document.querySelector('.ssqq')
    fb.onclick = function () {
        section.style.display = 'block'
    }
    sapn.onclick = function () {
        section.style.display = 'none'
    }
    btn2.onclick = function () {
        section.style.display = 'none'
    }
    btn1.onclick = function () {
        //获取文本
        var iup1v = iup1.value;
        var iup2v = iup2.innerText;
        //创建新的li
        var li = document.createElement("li");
        li.innerHTML = //向li添加元素
            '<a href="#">' + iup1v + '</a>' +
            '<p>' + iup2v + '</p>'
         //把tr加入dom结构中
         var ul = document.querySelector('ul')
        ul.insertBefore(li,ul.firstElementChild)
        section.style.display = 'none'
    }

        aa(h2);
    //封装一个子元素控制父元素的拖拽函数
    function aa(obj) {
            obj.onmousedown = function(event) {
                obj.parentNode.setCapture && obj.parentNode.setCapture
                event = event || window.event;
                var ol = event.clientX - obj.parentNode.offsetLeft;
                var ot = event.clientY - obj.parentNode.offsetTop;
                document.onmousemove = function(event) {
                    event = event || window.event;
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;
                    obj.parentNode.style.left = left + "px";
                    obj.parentNode.style.top = top + "px";
                };
                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    // obj.releaseCapture() && obj.releaseCapture();
                };
                return false;
            };
        }
</script>